<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:th="http://www.thymeleaf.org">
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge"> 
		<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
		<title>找回密码</title>
		<!--必要样式-->
		<link rel="stylesheet" type="text/css" th:href="@{/static/css/findpass.css}" />
		<!--[if IE]-->
		<script type="text/javascript" th:src="@{/static/js/html5.js}" charset="utf-8"></script>
		<!--[endif]-->
		<style type="text/css">
		.input-group{
			max-width: 400px;
			margin: 0 auto;
		}
		
		</style>
	</head>
	<body>
		<div class="container demo-1">
			<div class="content">
				<div id="large-header" class="large-header">
					<canvas id="demo-canvas"></canvas>
					<div class="logo_box">
						<h1>找回密码</h1>
						<div class="first">
							<p>邮箱找回密码</p>
								<form action=""  role="form" >
									    <div class="sno s-left">
											邮箱&nbsp;&nbsp;&nbsp;
											<input type="text"   id="email_add_input"  th:value="${email}" style="outline:none;" placeholder="请输入QQ邮箱"/>
											<button class="mycheck" type="button" id="email_submit_btn">验证</button>
										</div>
										<div class="sno">
											验证码<input type="text"  id="verifyCode_add_input"  style="outline:none;" placeholder="请输入邮箱验证码"/>
										</div>
									
									     <input type="button" value="下一步" class="submit" id="verifyCode_submit_btn"/>
								</form>
						</div>
						<div class="third">
							<p>设置新密码</p>
								<form action="" method="">
										<div class="sno">
										      新密码&nbsp;&nbsp;
											   <input type="password"  id="password1_update_input" style="outline:none;"  required="required"/><br/>
										       <span id="passwordMsg"></span>
										</div>
										<div class="sno">
										       再次输入<input type="password" style="outline:none;" id="password2_update_input" required="required"/><br/>
										         <span id="passwordMsg"></span><br/>
										</div>
										<input type="hidden"  id="email_updatePassword_input" style="outline:none;" />
									    <input type="button"  value="下一步"  class="submit" id="password_submit_btn"/>
								</form>
						</div>
						<div class="fourth">
							<div class="info">
								<p>密码修改成功</p>
								<a th:href="@{/base/login_index.do}">点击进行登录</a>
							</div>
						</div>
					</div>
				</div>		
			</div>		
		</div><!-- /container -->
		
		<script th:src="@{/static/js/TweenLite.min.js}"  type="text/javascript" charset="utf-8"></script>
		<script th:src="@{/static/js/EasePack.min.js}"   type="text/javascript" charset="utf-8"></script>
		<script th:src="@{/static/js/rAF.js}"            type="text/javascript" charset="utf-8"></script>
		<script th:src="@{/static/js/demo-1.js}"         type="text/javascript" charset="utf-8"></script>
		<script th:src="@{/static/js/jquery.min.js}"     type="text/javascript" charset="utf-8"></script>
		<script th:src="@{/static/js/jquery.md5.js}"     type="text/javascript" ></script>
	    <script type="text/javascript">
	      $("#email_submit_btn").click(function(){	
				//发送ajax请求校验用户名是否可用
				var toMail = $("#email_add_input").val();
				var regToMail = /^[1-9]\d{4,14}@(qq|QQ).com$/;
				
			    if(toMail == null  ||  toMail == undefined || toMail == ''){
				     alert("请输入邮箱账号");
			    }else if(!regToMail.test(toMail)){
			         alert("邮箱输入错误,请输入QQ邮箱");
			    }else{
			      $.ajax({
						url : "retrievePassword.do",
						data : "toMail=" + toMail,
						type : "POST",
						success : function(result) {
						
						    if (result.code == 200) {
								alert("验证码发送成功");
							} else {
								alert(result.extend.emailMessages);
							}
			               //参数回显
						   $("#email_add_input").val(toMail); 
						   $("#email_updatePassword_input").val(toMail);
						} 
					 });
			    }
		  });
		  
		  
	      $("#verifyCode_submit_btn").click(function(){
			    	
				//发送ajax请求校验用户名是否可用
				var verifyCode = $("#verifyCode_add_input").val();
				
			    if(verifyCode == null || verifyCode == ''){
			       alert("请输入验证码");
			    }else{
			       $.ajax({
					url : "emailVerify.do",
					data : "verifyCode=" + verifyCode,
					type : "POST",
					success : function(result) {
					    if (result.code == 200) {
					        $(".first").hide();
					        $(".third").show();
							alert("邮箱验证成功");
						} else {
							alert("邮箱验证失败");
						}
		
					  } 
				  });
			    
			   }
				
		  });
		  
		  
	      $("#password_submit_btn").click(function(){    
	      	
				//发送ajax请求校验用户名是否可用
				var password1 = $("#password1_update_input").val();
				var password2 = $("#password2_update_input").val();
				var toMail = $("#email_updatePassword_input").val();
 
			    //简单验证
			    if(password1 == null ||  password1 == '' || password2==null || password2 == ''){
			       alert("密码不能为空");  
			    }else if(password1.length>16 || password2.length>16){
			       alert("密码长度必须小于16位");  
			    }else if(password1 ==password2 && password1){
				    var begin = $.md5(password1);
					var password=begin.substring(4,12); 
			        $.ajax({
						url : "updatePassword.do",
						data : {"password":password,"toMail":toMail},
						type : "POST",
						success : function(result) {
						    if (result.code == 200) {
						       $(".third").hide();
				               $(".fourth").show();
							}else {
							   alert("找回密码失败");
						    } 
						 } 
				      });  
			    }else {
			       $("#passwordMsg").val("前后两次密码输入不正确");    
			    }
				
		  });
	    
	    
	    </script>
	</body>
</html>
